{% extends 'base.html' %}

{% block title %}
    {{ category.name }}
{% endblock %}

{% block top_css %}
    <!--引入Font Awesome字体库样式表-->
    <link rel="stylesheet" href="/static/css/font-awesome.min.css"
          tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/css/font-awesome.min.css">
    <!--引入guojian.min.css组件样式表-->
    <link rel="stylesheet" href="/static/css/guojian.min.css"
          tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/css/guojian.min.css">
    <!--引入style.css自定义样式表-->
    <link rel="stylesheet" href="/static/css/style.css"
          tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/css/style.css">

{% endblock %}

{% block top_js %}
    <script src="/static/js/jquery-1.12.4.min.js"
            tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/js/jquery-1.12.4.min.js"
            type="text/javascript"></script>
    <style type="text/css">
        body {
            background-image: none;
        }

        .gj-content .gj-cont pre, .gj-zp-cont .gj-cont pre {
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
    </style>
{% endblock %}

{% block head %}
    <div class="gj-lg-12">
        <div class="gj-head">
            <div class="gj-cont">
                <img src="{{ image_url }}"
                     tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/picture/touxiang.jpg" alt="">
                <input type="file" name="file" id="file" onchange="fileUpload()" style="display:none">
                <input type="button" onclick="select_file()" value="上传">
                <h4>Mr.郭 <i class="fa fa-vimeo-square" aria-hidden="true"></i></h4>
                <p>一个对“web前端”和“互联网创业”有着浓厚兴趣的90后草根站长！</p>
            </div>
        </div>
    </div>
{% endblock %}

{% block content %}
    <div class="gj-lg-8">

        <div class="gj-wk gcl-hb">
            <!--媒体列表-->
            <div class="gj-bt">
                <h3><i class="fa fa-list-ul" aria-hidden="true"></i> {{ category.name }}</h3>
            </div>
            <div class="gj-body gul-tuw1">
                {% for blog in page_blogs %}
                    <div class="gtw-ul gclear">
                        <div class="gtw-img">
                            <a href="{{ url('boke:blog',args=(blog.id,)) }}"
                               tppabs="http://demo.demohuo.top/modals/63/6398/demo/13.html"><img
                                    src="{{ blog.image.url }}"
                                    tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/picture/180313112630855.jpg"
                                    alt="未备案网站免费使用畅言社会化评论系统的教程"></a>
                        </div>
                        <div class="gtw-body">
                            <a href="{{ url('boke:blog',args=(blog.id,)) }}" tppabs="http://demo.demohuo.top/modals/63/6398/demo/13.html">
                                <h4>{{ blog.title }}</h4>
                            </a>
                            <p>{{ blog.abstract }}</p>
                            <div class="gtw-sx">
                                <i class="fa fa-plus-square" aria-hidden="true"> {{ blog.author }}</i>
                                <i class="fa fa-clock-o"
                                   aria-hidden="true"> {{ blog.create_time.strftime('%Y-%m-%d %H:%M:%S') }}</i>
                                <i class="fa fa-eye" aria-hidden="true"> {{ blog.read_count }}</i>
                                <a href="index1.html"
                                   tppabs="http://demo.demohuo.top/modals/63/6398/demo/index1.html"><i
                                        class="fa fa-folder-open"
                                        aria-hidden="true"> {{ blog.category.name }}</i></a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <!--gul-tuw1-结束-->
            <div class="r_wrap fr clearfix">
                ......
                <div class="pagenation">
                    <div id="pagination" class="page"></div>
                </div>
            </div>
        </div>

        <div class="gj-gg">
            <a href="javascript:;" target="_blank" title="建站就选YzmCMS！"><img
                    src="/static/picture/180121054109100.jpg"
                    tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/picture/180121054109100.jpg"></a>
        </div>
        <div class="gj-wk gcl-hb hidd">
            <!--媒体列表-->
            <div class="gj-bt">
                <h3><i class="fa fa-html5" aria-hidden="true"></i> 作品分享</h3>
                <a href="index1.html" tppabs="http://demo.demohuo.top/modals/63/6398/demo/index1.html"><i
                        class="fa fa-angle-double-left" aria-hidden="true"></i> 查看更多</a></div>
            <div class="gj-body gul-tuw2">
                <div class="gj-lg-4 gj-md-3 gj-sm-4 gj-xs-6">
                    <div class="gtw-ul">
                        <div class="gtw-img"><a href="21.html"
                                                tppabs="http://demo.demohuo.top/modals/63/6398/demo/21.html"><img
                                src="/static/picture/180201112418133.jpg"
                                tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/picture/180201112418133.jpg"
                                alt="响应式橙色大气html5企业网站模板GJ-qiye（YzmCMS整站版）"></a> <span>企业模板</span></div>
                        <div class="gtw-body"><a href="21.html"
                                                 tppabs="http://demo.demohuo.top/modals/63/6398/demo/21.html">
                            <h4>响应式橙色大气html5企业网站模板GJ-qiye（YzmCMS整站版）</h4>
                        </a>
                            <p>响应式橙色大气html5企业网站模板GJ-qiye（YzmCMS整站版），自适应PC端、ipad、手机端，...</p>
                            <div class="gtw-sx"><span>阅读：6089</span> | <span>发布时间：2018-02-01</span></div>
                        </div>
                    </div>
                </div>
                <!--gj-lg-4-结束-->
                <div class="gj-lg-4 gj-md-3 gj-sm-4 gj-xs-6">
                    <div class="gtw-ul">
                        <div class="gtw-img"><a href="12.html"
                                                tppabs="http://demo.demohuo.top/modals/63/6398/demo/12.html"><img
                                src="/static/picture/180201024857924.jpg"
                                tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/picture/180201024857924.jpg"
                                alt="响应式HTML5黑白系个人网站主题GJ-blog1.0清爽版"></a> <span>博客模板</span></div>
                        <div class="gtw-body"><a href="12.html"
                                                 tppabs="http://demo.demohuo.top/modals/63/6398/demo/12.html">
                            <h4>响应式HTML5黑白系个人网站主题GJ-blog1.0清爽版</h4>
                        </a>
                            <p>响应式HTML5黑白系个人模板主题GJ-blog1.0清爽版，自适应ipad、手机端，主题代码结构简洁...</p>
                            <div class="gtw-sx"><span>阅读：6781</span> | <span>发布时间：2018-01-21</span></div>
                        </div>
                    </div>
                </div>
                <!--gj-lg-4-结束-->
            </div>
            <!--gj-body-结束-->
        </div>
    </div>
{% endblock %}

{% block bottom_js %}
    <!--引入guojian.min.js组件脚本-->
    <script src="/static/js/guojian.min.js"
            tppabs="http://demo.demohuo.top/modals/63/6398/demo//static/js/guojian.min.js"
            type="text/javascript"></script>
    <script type="text/javascript">
        //一开始 就请求一次验证码
        var id = Math.random();
        $("#captcha_img").prop('src', "{{ url("verifications:img_code") }}?id=" + id);

        //点击图片 修改验证码 其实就是重新请求
        $("#captcha_img").click(function () {
            var id = Math.random();
            //修改请求路径后面的参数，每次不一样，这样就可以重新请求图片了
            $(this).prop('src', "{{ url("verifications:img_code") }}?id=" + id)
        });

        $('.change').click(function () {
            $.ajax({
                url: "{{ url('users:password') }}",
                type: "GET",
                {#headers: {"X-CSRFToken": $.cookie('csrftoken')},#}
                data: '',
                success: function (data) {
                    if (data.code_s == 4101) {
                        alert(data.errmsg);
                        window.location = '/'
                    } else {
                        window.location = '/password/'
                    }
                },
                error: function (error) {
                    console.log(error)
                }
            })
        });

        $('.category').click(function () {
            $.ajax({
                {% for category in categories %}
                    url: "{{ url('index:my_index',args=(1,category.id)) }}",
                {% endfor %}
                type: "GET",
                {#headers: {"X-CSRFToken": $.cookie('csrftoken')},#}
                data: '',
                success: function (data) {
                    if (data.code_s == 4101) {
                        alert(data.errmsg);
                        window.location = '/'
                    } else {
                        window.location = '/password/'
                    }
                },
                error: function (error) {
                    console.log(error)
                }
            })
        });

        $('#send').click(function () {
            $.ajax({
                url: "{{ url('users:send_boke') }}",
                type: "GET",
                {#headers: {"X-CSRFToken": $.cookie('csrftoken')},#}
                data: '',
                success: function (data) {
                    if (data.code_s == 4101) {
                        alert(data.errmsg);
                        window.location = '/'
                    } else {
                        window.location = '/send_boke/'
                    }
                },
                error: function (error) {
                    alert(123)
                    console.log(error)
                }
            })
        });

        $('#login').click(function () {
            $.ajax({
                url: "/login/",
                type: "post",
                dataType: 'json',
                {#headers: {"X-CSRFToken": $.cookie('csrftoken')},#}
                data: {
                    username: $("#username").val(),
                    password: $("#password").val(),
                    code: $("#captcha").val(),
                    uuid: document.getElementById("captcha_img").src.split('=')[1]
                },
                success: function (data) {
                    if (data.code_s == 0) {
                        alert(data.errmsg);
                        window.location = '/'
                    } else {
                        alert(data.errmsg);
                        window.location = '/'
                    }
                    {#$(".ret").val(data)#}
                }
            })
        });

        $('#logout').click(function () {
            $.ajax({
                url: "/logout/",
                type: "get",
                dataType: 'json',
                {#headers: {"X-CSRFToken": $.cookie('csrftoken')},#}
                data: {},
                success: function (data) {
                    if (data.code_s == 0) {
                        alert(data.errmsg);
                        window.location = '/'
                    }
                    {#$(".ret").val(data)#}
                }
            })
        });

        $(function () {
            $('#pagination').pagination({
                currentPage: {{ page_num }},
                totalPage: {{ total_page }},
                callback: function (current) {
                    {#location.href = '/list/115/1/?sort=default';#}
                    location.href = current;
                }
            })
        });

    </script>
    <script type="text/javascript">
        {## 点击button按钮触发input标签#}

        function getCookie(name) {
            var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
            return r ? r[1] : undefined;
        }

        function select_file() {
            $("#file").trigger("click");
        }

        function fileUpload() {
            {## 创建formdata对象#}
            var formData = new FormData();
            {## 给formData对象添加 < input > 标签, 注意与input标签的ID一致#}
            formData.append('file', $('#file')[0].files[0]);
            $.ajax({
                url: '/headImage/',//这里写你的url
                type: 'post',
                headers: {
                    "X-CSRFToken": getCookie('csrftoken')
                },
                data: formData,
                contentType: false,// 当有文件要上传时，此项是必须的，否则后台无法识别文件流的起始位置
                processData: false,// 是否序列化data属性，默认true(注意：false时type必须是post)
                clearForm: true,//提交后是否清空表单数据
                success: function (data) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
                    if (data.code_s == 0) {
                        alert(data.errmsg);
                        location.reload()
                    }

                },

            });
        }
    </script>
{% endblock %}

{% block js_code %}
    <!--GJ-UI组件模块js代码开始-->
    <script>
        /*GJ-UI响应式导航栏*/
        $(document).ready(function () {
            $(".gbar").click(function () {
                $(".gnav-ul").slideToggle("slow");
                return false
            })
        });
    </script>
    <script>
        /*返回顶部开始*/
        jQuery(function ($) {
            $('.gj-top').toTop({
                autohide: true,
                offset: 320,
                speed: 500,
                right: 15,
                bottom: 15
            })
        });
    </script>
{% endblock %}